<template>
  <div class="infoWindow-chuguan" v-show="infoWindowShow" id="chuguan">
    <div class="infoWindow-chuguan-title">
      <div class="infoWindow-chuguan-title-icon">储罐详情</div>
      <div
        class="infoWindow-chuguan-title-close"
        @click="closeInfoWindow('chuguan')"
      >
        ×
      </div>
    </div>
    <div class="infoWindow-chuguan-middle">
      <div class="infoWindow-chuguan-middle-icon"></div>
      <div class="infoWindow-chuguan-middle-text">
        <div class="infoWindow-chuguan-middle-text-one">
          <span>原油储罐</span><span>G205</span>
        </div>
        <div class="infoWindow-chuguan-middle-text-two">类型：原油</div>
        <div class="infoWindow-chuguan-middle-text-three">正常</div>
      </div>
    </div>
    <div class="infoWindow-chuguan-buttom">
      <div class="infoWindow-chuguan-buttom-tabs">
        <div :class="buttonStyle.qushi" @click="changeButton('qushi')">
          趋势分析
        </div>
        <div :class="buttonStyle.shishi" @click="changeButton('shishi')">
          实时信息
        </div>
        <div :class="buttonStyle.jiben" @click="changeButton('jiben')">
          基本信息
        </div>
      </div>
      <div class="infoWindow-chuguan-buttom-second">
        <div class="infoWindow-chuguan-buttom-second-border">
          <div id="qsfxChart" class="charts" v-show="showItem.qushi" />
          <el-form
            size="small"
            :model="formData"
            label-position="left"
            label-width="100px"
            disabled
            class="second-form"
            v-show="showItem.shishi"
          >
            <el-form-item>
              <template #label>
                <span class="el-icon-document"></span
                ><span class="label-span">监测指标</span>
              </template>
              <el-input v-model="formData.jiancezhibiao" />
            </el-form-item>
            <el-form-item>
              <template #label>
                <span class="el-icon-film"></span
                ><span class="label-span">监测值</span>
              </template>
              <el-input v-model="formData.jiancezhibiao" />
            </el-form-item>
            <el-form-item>
              <template #label>
                <span class="el-icon-set-up"></span
                ><span class="label-span">阈值</span>
              </template>
              <el-input v-model="formData.jiancezhibiao" />
            </el-form-item>
            <el-form-item>
              <template #label>
                <span class="el-icon-date"></span
                ><span class="label-span">采集时间</span>
              </template>
              <el-input v-model="formData.jiancezhibiao" />
            </el-form-item>

            <el-pagination
            small
            layout="prev, pager, next"
            :page-size="1"
            :total="5">
          </el-pagination>
          </el-form>
          <el-form
            size="small"
            :inline="true"
            :model="formData"
            class="form-inline"
            label-position="left"
            disabled
            v-show="showItem.jiben"
          >
            <el-form-item label="罐的容积">
              <el-input v-model="formData.rongji" />
            </el-form-item>
            <el-form-item label="压力类型">
              <el-input v-model="formData.yaliType" />
            </el-form-item>
            <el-form-item label="设计压力">
              <el-input v-model="formData.shejiyali" />
            </el-form-item>
            <el-form-item label="最高压力">
              <el-input v-model="formData.zuigaoyali" />
            </el-form-item>
            <el-form-item label="温度类型">
              <el-input v-model="formData.wenduType" />
            </el-form-item>
            <el-form-item label="温度低限">
              <el-input v-model="formData.wendudixian" />
            </el-form-item>
            <el-form-item label="温度高限">
              <el-input v-model="formData.wendugaoxian" />
            </el-form-item>
            <el-form-item label="介质形态">
              <el-input v-model="formData.jiezhixingtai" />
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
    <div class="infoWindow-chuguan-arrow"></div>
  </div>
</template>

<script>
/* eslint-disable no-undef */
import { onMounted, reactive, ref, toRefs, getCurrentInstance } from "vue";
export default {
  name: "chuguanInfoWindow",
  components: {},
  setup() {
    const { proxy } = getCurrentInstance();
    const state = reactive({
      infoWindowShow: false,
      formData: {
        rongji: "",
        yaliType: "",
        shejiyali: "",
        zuigaoyali: "",
      },
      buttonStyle: {
        qushi: "tabs-active",
        shishi: "tabs",
        jiben: "tabs",
      },
      showItem: {
        qushi: true,
        shishi: false,
        jiben: false,
      },
    });
    // watch(map3dViewer?.value?.cameraData, (newValue) => {
    //   state.cameraData = newValue;
    // });
    onMounted(() => {
      //initChart();
    });
    //关闭弹窗
    const closeInfoWindow = (type) => {
      state.formData = {
        rongji: "",
        yaliType: "",
        shejiyali: "",
        zuigaoyali: "",
      };
      state.buttonStyle = {
        qushi: "tabs-active",
        shishi: "tabs",
        jiben: "tabs",
      };
      state.showItem = {
        qushi: true,
        shishi: false,
        jiben: false,
      };
      document.getElementById(type).style.display = "none";
    };
    const initChart = () => {
      var chartDom = document.getElementById("qsfxChart");
      chartDom.style.width = "300px";
      chartDom.style.height = "200px";
      var myChart = proxy.$echarts.init(chartDom);
      var option;
      option = {
        grid: {
          left: "3%", //默认10%
          //right: '6%', //默认10%
          bottom: "8%", //默认60
          containLabel: true,
          //grid区域是否包含坐标轴的刻度标签
        },
        title: {
          show: true,
          text: "原油储罐 G205 原油储罐液位",
          top: 10,
          left: "left",
          textStyle: {
            color: "#ffffff",
            fontSize: 14,
            fontWeight: "normal",
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: [
            "2022-05-12 18:15:20",
            "2022-05-12 18:15:21",
            "2022-05-12 18:15:22",
            "2022-05-12 18:15:23",
          ],
          axisLabel: {
            fontSize: 10,
            interval: 0, //全部显示x轴
            color: "#ffffff",
          },
        },
        yAxis: {
          type: "value",
          splitLine: {
            show: true, //y
            lineStyle: {
              color: "rgba(255,255,255,0.25)",
            },
          },
          axisLabel: {
            color: "#ffffff",
          },
        },
        axisLabel: {
          interval: 0,
          // 折行显示的函数
          formatter: (params) => {
            let newParamsName = "";
            const paramsNameNumber = params.length;
            const provideNumber = 10; // 一行显示几个字符
            const rowNumber = Math.ceil(paramsNameNumber / provideNumber);
            if (paramsNameNumber > provideNumber) {
              for (let p = 0; p < rowNumber; p++) {
                let tempStr = "";
                const start = p * provideNumber;
                const end = start + provideNumber;
                if (p === rowNumber - 1) {
                  tempStr = params.substring(start, paramsNameNumber);
                } else {
                  tempStr = params.substring(start, end) + "\n";
                }
                newParamsName += tempStr;
              }
            } else {
              newParamsName = params;
            }
            return newParamsName;
          },
        },
        series: [
          {
            data: [12, 12, 12, 12],
            type: "line",
            symbol: "none",
            areaStyle: {
              normal: {
                color: ["rgba(91,143,249,0.25)"],
              },
            },
            itemStyle: {
              normal: {
                color: "#5B8FF9",
                lineStyle: {
                  color: "#1890FF",
                },
              },
            },
          },
        ],
      };

      option && myChart.setOption(option);
    };
    const changeButton = (type) => {
      state.buttonStyle = {
        qushi: "tabs",
        shishi: "tabs",
        jiben: "tabs",
      };
      state.showItem = {
        qushi: false,
        shishi: false,
        jiben: false,
      };
      state.buttonStyle[type] = "tabs-active";
      state.showItem[type] = true;
    };
    return {
      ...toRefs(state),
      closeInfoWindow,
      changeButton,
    };
  },
};
</script>
<style lang="scss" scope>
.infoWindow-chuguan {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 380px;
  height: 430px;
  opacity: 0.9;
  background: linear-gradient(
    180deg,
    rgba(8, 17, 31, 0.9),
    rgba(9, 16, 34, 0.8) 7%,
    rgba(8, 13, 24, 0.7)
  );
  border: 2px solid #383f57;
  .infoWindow-chuguan-arrow {
    position: absolute;
    bottom: -20px;
    left: calc(50% - 10px);
    width: 0;
    height: 0;
    border: 10px solid transparent;
    border-top-color: #383f57;
  }
  .infoWindow-chuguan-title {
    height: 43px;
    width: 100%;
    text-align: center;
    line-height: 43px;
    .infoWindow-chuguan-title-icon {
      background: url("../../../../assets/images/map3d/title-bg.png");
      width: 250px;
      height: 43px;
      margin: auto;
      font-size: 18px;
      font-family: TRENDS, TRENDS-Regular;
      font-weight: 400;
      text-align: center;
      color: #ffffff;
    }
    .infoWindow-chuguan-title-close {
      text-align: center;
      vertical-align: middle;
      padding: auto;
      cursor: pointer;
      line-height: 26px;
      font-size: 30px;
      position: absolute;
      right: 0;
      top: 0;
      width: 30px;
      height: 30px;
      opacity: 1;
      background: #2c3a55;
      background: linear-gradient(#6cbbcb, #6cbbcb) left top,
        linear-gradient(#6cbbcb, #6cbbcb) left top,
        linear-gradient(#6cbbcb, #6cbbcb) right top,
        linear-gradient(#6cbbcb, #6cbbcb) right top,
        linear-gradient(#6cbbcb, #6cbbcb) left bottom,
        linear-gradient(#6cbbcb, #6cbbcb) left bottom,
        linear-gradient(#6cbbcb, #6cbbcb) right bottom,
        linear-gradient(#6cbbcb, #6cbbcb) right bottom;
      background-repeat: no-repeat;
      background-size: 2px 5px, 5px 2px;
    }
  }

  .infoWindow-chuguan-middle {
    height: 80px;
    width: 100%;
    padding-left: 50px;
    padding-right: 50px;
    margin-top: 15px;
    margin-bottom: 15px;
    display: flex;
    .infoWindow-chuguan-middle-icon {
      width: 86px;
      height: 80px;
      background: url("../../../../assets/images/map3d/chuguan2.png") no-repeat;
      background-size: 100% 100%;
      margin-right: 20px;
    }
    .infoWindow-chuguan-middle-text {
      width: 200px;
      height: 80px;
      text-align: left;
      .infoWindow-chuguan-middle-text-one {
        font-size: 18px;
        font-family: TRENDS, TRENDS-Regular;
        font-weight: 400;
        color: #ffffff;
        margin: 5px;
        span {
          margin-right: 8px;
        }
      }
      .infoWindow-chuguan-middle-text-two {
        font-size: 14px;
        font-family: PingFangSC, PingFangSC-Regular;
        font-weight: 400;
        color: #daddf5;
        margin: 5px;
      }
      .infoWindow-chuguan-middle-text-three {
        width: 48px;
        height: 20px;
        opacity: 1;
        background: #34bf79;
        border-radius: 4px;
        font-size: 11px;
        font-family: TRENDS, TRENDS-Regular;
        font-weight: 400;
        text-align: left;
        color: #ffffff;
        text-align: center;
        line-height: 20px;
        margin: 5px;
      }
    }
  }
  .infoWindow-chuguan-buttom {
    .infoWindow-chuguan-buttom-tabs {
      //width: 100%;
      height: 25px;
      border-bottom: 1px solid;
      border-color: rgba($color: #ffffff, $alpha: 0.1);
      font-size: 12px;
      font-family: PingFangSC, PingFangSC-Medium;
      font-weight: 500;
      color: #ffffff;
      line-height: 25px;
      display: flex;
      text-align: center;
      padding-left: 30px;
      padding-right: 30px;
      .tabs {
        background: rgba(33, 50, 67, 0.8);
        width: 88px;
        margin-left: 10px;
        margin-right: 10px;
        cursor: pointer;
        border-bottom: 1px solid rgba(33, 50, 67, 0.8);
      }
      .tabs-active {
        background: rgba(49, 67, 122, 0.8);
        width: 88px;
        margin-left: 10px;
        margin-right: 10px;
        cursor: pointer;
        border-bottom: 1px solid rgba(112, 148, 246, 1);
      }
    }
    .infoWindow-chuguan-buttom-second {
      width: calc(100% - 40px);
      height: 210px;
      margin: 20px;
      margin-top: 15px;
      border: 1px solid;
      border-color: rgba($color: #aab7ff, $alpha: 0.4);
      border-radius: 4px;
      .infoWindow-chuguan-buttom-second-border {
        width: calc(100% - 32px);
        height: 100%;
        background: rgba($color: #1f2843, $alpha: 0.4);
        border-radius: 4px;
        margin: 2px;
        padding: 5px;
        padding-left: 20px;
        padding-right: 15px;
      }
    }
  }
  .second-form {
    .el-input__inner {
      width: 180px;
    }
    .el-form-item{
      margin-bottom: 10px !important;
    }
  }
  .label-span {
    margin-left: 5px;
  }
  .el-form {
    margin-top: 5px;
  }
  .el-input__inner {
    border: 1px solid #383d5f;
    background: rgba(33, 38, 48, 0.5);
    border-radius: 4px;
    width: 80px;
    height: 30px;
  }
  .el-input.is-disabled .el-input__inner {
    border: 1px solid #383d5f;
  }
  .el-form-item__label {
    font-size: 12px;
    font-family: PingFangSC, PingFangSC-Regular;
    font-weight: 400;
    text-align: left;
    color: #daddf5;
  }
  .el-pagination{
    text-align: center;
    color: #383d5f;
  }
  .el-pagination .btn-next, .el-pagination .btn-prev, .el-pagination .el-pager li {
  background-color: transparent;
}
.el-pagination .el-pager li:not(.disabled).active{
  background-color: transparent;
  color: #daddf5;
}
.el-pagination .btn-next, .el-pagination .btn-prev{
  color: #383d5f;
}
}
</style>
